<template>
  <view>
    <!-- <uni-nav-bar :title="title"  fixed empty backgroundColor="#fff">
			<view class="flex align-center" slot="left">
				<tui-icon @click="navBack"  name="arrowleft"  :size="22"></tui-icon>
			</view>
		</uni-nav-bar> -->
    <!-- <tt-navbar
      :left="true"
      :title="title"
      rightText=""
      @lclick="navBack"
    ></tt-navbar> -->
    <t-header @back="back">{{ title }} </t-header>
    <view
      v-if="tabIndex <= 0"
      class="flex bg-white padding-tb-sm margin-bottom-sm store"
    >
      <view class="text-center text-lg storeValue">
        <view class="title">持仓市值</view>
        <view class="margin-top-sm value">{{ total.cityValue }}</view>
      </view>
      <view class="text-center text-lg storeGet">
        <view class="title">持仓盈亏</view>
        <view
          class="margin-top-sm value"
          :class="total.profitLoss > 0 ? 'text-red' : 'text-green'"
          >{{ total.profitLoss }}</view
        >
      </view>
    </view>

    <tui-tabs
      @change="changeTab"
      :tabs="tabs"
      :currentTab="tabIndex"
      itemWidth="50%"
      color="#8f8f8f"
      selectedColor="#000"
      sliderBgColor="#F74E51"
    ></tui-tabs>
    <view class="list-con">
      <swiper
        :style="{ height: height }"
        :current="tabIndex"
        @change="swiperChange"
      >
        <swiper-item v-for="(tab, i) in tabs" :key="i">
          <mescroll-item
            @initTotal="initTotal"
            ref="mescrollItem"
            :i="i"
            :index="tabIndex"
            :tabs="tabs"
            :height="height"
          ></mescroll-item>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup>
  import MescrollItem from './comp/rt-swiper-item.vue';
  import {
    tradeSell,
    getNowWarehouse,
    getNowWarehouseHistory,
  } from '@/api/index.js';
  import { onLoad, onUnload } from '@dcloudio/uni-app';
  import tHeader from '@/components/views/t-header/index.vue';

  import { ref } from 'vue';
  const total = ref({
    cityValue: 0,
    profitLoss: 0,
  });
  const tabIndex = ref(0);
  const height = ref('');
  const tabs = ref([
    { name: '当前持仓', api: 'getNowWarehouse' },
    { name: '历史持仓', api: 'getNowWarehouseHistory' },
  ]);
  const title = ref('大宗交易记录');

  const back = () => {
    uni.navigateBack();
  };

  const mescrollItem = ref();

  onLoad((t) => {
    console.log('TTT', t);

    height.value =
      uni.getSystemInfoSync().windowHeight - uni.upx2px(79 * 2 + 80) + 'px';
    if (t.name) {
      title.value = t.name;
    }
    // uni.$on('refreshData_dz', () => {
    //   console.log(tabIndex.value);

    //   setTimeout(() => {
    //     //   this.$refs.mescrollItem[this.tabIndex].downCallback();
    //   }, 100);
    // });
  });
  onUnload(() => {
    uni.$off('refreshData_dz');
  });

  const initTotal = (total) => {
    total.value = total;
  };
  const swiperChange = (e) => {
    tabIndex.value = e.detail.current;
    // setTimeout(() => {
    //   this.$refs.mescrollItem[e.detail.current].downCallback();
    // }, 100);
  };

  const changeTab = (e) => {
    tabIndex.value = e.index;
    setTimeout(() => {
      console.log('eee', mescrollItem.value[e.index]);

      mescrollItem.value[e.index].downCallback();
    }, 100);
    // 并且将子页面的数字 传到父页面
  };
</script>

<!-- <script>
  import MescrollItem from './comp/dzjy-swiper-item.vue';
  import {
    tradeSell,
    getNowWarehouse,
    getNowWarehouseHistory,
  } from '@/api/index.js';
  export default {
    components: {
      MescrollItem,
    },
    data() {
      return {
        total: {
          cityValue: 0,
          profitLoss: 0,
        },
        tabIndex: 0,
        height: '',
        tabs: [{ name: '当前持仓' }, { name: '历史持仓' }],
        title: '大宗交易',
      };
    },
    onLoad(t) {
      this.height =
        uni.getSystemInfoSync().windowHeight - uni.upx2px(79 * 2 + 80) + 'px';
      if (t.name) {
        this.title = t.name;
      }
      uni.$on('refreshData_dz', () => {
        console.log(this.tabIndex);

        setTimeout(() => {
          this.$refs.mescrollItem[this.tabIndex].downCallback();
        }, 100);
      });
    },
    onUnload() {
      uni.$off('refreshData_dz');
    },
    methods: {
      initTotal(total) {
        this.total = total;
      },
      swiperChange(e) {
        this.tabIndex = e.detail.current;
      },
      changeTab(e) {
        console.log(e.index);
        this.tabIndex = e.index;
        this.$refs.mescrollItem[e.index].downCallback();
        // 并且将子页面的数字 穿回到父页面
      },
    },
  };
</script> -->

<style lang="scss" scoped>
  .store {
    padding: 38rpx 34rpx 34rpx 34rpx;
    gap: 48rpx;
    .title {
      font-size: 42rpx;
      color: #212121;
      font-weight: 500;
    }
    .value {
      font-weight: bold;
      font-size: 40rpx;
    }
  }
  .storeValue {
    flex: 1;
    background: linear-gradient(to bottom, #f3d3d3, #fff8f8);
    height: 170rpx;
    padding: 24rpx;
    border-radius: 14rpx;
    .value {
      color: #fe3d4e;
    }
  }
  .storeGet {
    flex: 1;
    background: linear-gradient(to bottom, #66bd6f, #edf2eb);
    height: 170rpx;
    padding: 24rpx;
    border-radius: 14rpx;
  }
  .tui-tabs-relative {
    height: 126rpx !important;
    background: linear-gradient(to bottom, #ffffff, #f7e9e9) !important;
    ::v-deep .tui-tabs-item > .tui-tabs-title {
      font-weight: 400 !important;
      font-size: 38rpx !important;
      color: #8f8f8f;
    }
    ::v-deep .tui-tabs-active > .tui-tabs-title {
      color: #000000;
    }
  }
</style>
